  <template>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="培训人">
              <el-select v-model="searchForm.engineerIds" filterable multiple placeholder="培训人">
                <el-option v-for="item in engineerList" :key="item.id" :label="item.realName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="培训标题">
              <el-input v-model="searchForm.trainingTitle" placeholder="培训标题" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="培训时间">
              <el-date-picker style="width: 150px" v-model="searchForm.startDate" type="date" placeholder="开始时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
              </el-date-picker>
              &nbsp; - &nbsp;
              <el-date-picker style="width: 150px" v-model="searchForm.endDate" type="date" placeholder="结束时间"
                format="YYYY-MM-DD" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <div class="flex items-center justify-end">
              <el-button type="primary" @click="initTableData(1)">搜索</el-button>
              <el-button @click="resetSearchForm">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>

      <!-- 新增|刷新 -->
      <div class="flex items-center justify-between mb-4">
        <div></div>

        <el-tooltip effect="dark" content="刷新数据" placement="top">
          <el-button text @click="initTableData">
            <el-icon :size="20">
              <Refresh />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>

      <!-- 表格数据 -->
      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <el-table-column label="培训人" align="center">
          <template #default="{ row }">
            {{ row.engineerName }}
          </template>
        </el-table-column>

        <el-table-column label="培训标题" align="center">
          <template #default="{ row }">
            {{ row.trainingTitle }}
          </template>
        </el-table-column>

        <el-table-column label="培训时间" align="center">
          <template #default="{ row }">
            {{ dateFormatter(row.createTime) }}
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            {{ row.isFinish == 0 ? "未结束" : "已结束" }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" text @click="showTrainingDetails(scope.row)">详情</el-button>
            <el-button type="primary" size="small" text @click="showTrainingEvaluation(scope.row)">评分</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
          :page-size="limit" @current-change="initTableData" />
      </div>
    </el-card>

    <!-- 培训详情 -->
    <FormDrawer showSubBtn="0" ref="formDrawerRef_training" title="培训详情">
      <el-form-item label="培训人员:">
        <span>{{
          row_now.trainingPersonnel == null ? "暂无" : row_now.trainingPersonnel
        }}</span>
      </el-form-item>

      <el-form-item label="培训内容:">
        <el-table :data="trainingContentList" stripe style="width: 100%">
          <el-table-column label="培训项目" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.trainingProject }}
            </template>
          </el-table-column>
          <el-table-column label="培训要求" align="center" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.trainingRequirements }}
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="培训记录:">
        <div class="content">
          <div style="display: flex; align-items: center;" v-for="(item, index) in filesInfo" :key="index">
            <div style="width: 100%;">
              <span style="text-align: center;">{{ item.name }}</span>
            </div>
            <div>
              <el-button type="primary" text @click="downloadFile(item.url)">下载</el-button>
            </div>
          </div>
          <div v-if="filesInfo == null" class="no-data">
            暂无记录
          </div>
        </div>
      </el-form-item>
    </FormDrawer>

    <!-- 培训评分 -->
    <FormDrawer showSubBtn="0" ref="formDrawerRef_trainingEvaluation" title="培训评分">
      <el-collapse v-model="activeNames">
        <!-- :title="item.evaluationPerson" -->
        <el-collapse-item v-for="(item, index) in trainingEvaluationList.value" :key="index" :name="index.toString()" :title="'评价' + (index+1)">
          <el-form-item label="工程师是否按培训表格要求内容培训" label-width="250px" label-position="left">
            <el-rate v-model="item.engineerFollowedTrainingRequirements" disabled />
          </el-form-item>
          <el-form-item label="工程师的培训讲解是否合格" label-width="250px" label-position="left">
            <el-rate v-model="item.engineerTrainingExplanationSatisfactory" disabled />
          </el-form-item>
          <el-form-item label="对培训效果的评价" label-width="250px" label-position="left">
            <el-rate v-model="item.trainingEffectivenessEvaluation" disabled />
          </el-form-item>
          <el-form-item label=" 工程师的培训态度评价" label-width="250px" label-position="left">
            <el-rate v-model="item.engineerTrainingAttitudeEvaluation" disabled />
          </el-form-item>
          <el-form-item label="对产品操作评价" label-width="250px" label-position="left">
            <el-rate v-model="item.productOperationEvaluation" disabled />
          </el-form-item>
          <el-form-item label=" 对产品功能评价" label-width="250px" label-position="left">
            <el-rate v-model="item.productFunctionEvaluation" disabled />
          </el-form-item>
          <el-form-item label="对产品稳定性评价" label-width="250px" label-position="left">
            <el-rate v-model="item.productStabilityEvaluation" disabled />
          </el-form-item>
          <el-form-item label="总体评价" label-width="250px" label-position="left">
            <el-input type="textarea" :rows="3" v-model="item.totalEvaluation" placeholder="总体评价" disabled></el-input>
          </el-form-item>
          <el-form-item label="评价时间" label-width="250px" label-position="left">
            <span>{{ dateFormatter(item.createTime) }}</span>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </FormDrawer>
  </template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { toast, toastWarn } from "~/composables/util";
import FormDrawer from "~/components/FormDrawer.vue";
import { api_user_list } from "~/api/userApi";
import { dateFormatter } from "~/utils/common";
import { searchTrainingsList, getTrainingEvaluation, getTrainingReport } from "~/api/supply";

// 分页
const currentPage = ref(1);
const total = ref(0);
const limit = ref(10);
const tableData = ref([]);
const loading = ref(false);
// 工程师列表
const engineerList = ref([]);

// 培训详情弹窗------------
const formDrawerRef_training = ref(null);
const trainingContentList = ref([]);
const row_now = ref(null);
const filesInfo = ref(null)
// 培训详情弹窗------------

// 培训评分------------
const formDrawerRef_trainingEvaluation = ref(null);
const trainingEvaluationList = reactive([]);
const activeNames = ref(["0"]);
// 培训评分------------

// 查询条件
const searchForm = reactive({
  engineerIds: [],
  trainingTitle: null,
  startDate: null,
  endDate: null,
  page: currentPage.value,
  size: limit.value,
});
// 重置搜索框
const resetSearchForm = () => {
  searchForm.engineerIds = [];
  searchForm.trainingTitle = null;
  searchForm.startDate = null;
  searchForm.endDate = null;
  initTableData(1);
};

// 生命周期函数
onMounted(() => {
  //加载工程师列表
  initEngineerList();

  //初始化列表数据
  initTableData();
});

// 获取数据
function initEngineerList() {
  //请求参数
  let paramIo = { roleId: 4, page: 1, size: 10000 };
  api_user_list(paramIo)
    .then((res) => {
      if (res) {
        engineerList.value = res.records;
      }
    })
    .catch((err) => {
      console.log("查询工程师列表错误:", err);
    });
}

// 获取数据
function initTableData(p = null) {
  //指定页码是否为空
  if (typeof p == "number") {
    currentPage.value = p;
  }

  //loading.value = true
  searchForm.page = currentPage.value;

  searchTrainingsList(searchForm)
    .then((res) => {
      if (res) {
        tableData.value = res.records;
        total.value = res.total;
      } else {
        tableData.value = [];
        total.value = 0;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

// 培训详情
const showTrainingDetails = (row) => {
  row_now.value = row;
  if (null != row.trainingContent && row.trainingContent.indexOf("{") != -1) {
    try {
      trainingContentList.value = JSON.parse(row.trainingContent);
    } catch (err) {
      trainingContentList.value = [];
    }
  } else {
    trainingContentList.value = [];
  }

  //获取pdf培训记录
  getTrainingReport(row.trainingId)
    .then((res) => {
      if (res) {
        //console.log(JSON.stringify(res))
        filesInfo.value = res
      } else {
        filesInfo.value = null
      }
    }).catch((err) => {
      console.log("获取pdf培训记录失败:", err);
    });

  //console.log(JSON.stringify(trainingContentList.value))
  formDrawerRef_training.value.open();
};

// 下载
const downloadFile = (url) => {
  window.location.href = url
}

// 培训评分
const showTrainingEvaluation = (row) => {
  //查询评分
  getTrainingEvaluation(row.trainingId)
    .then((res) => {
      if (res) {
        //赋值
        trainingEvaluationList.value = res;
        //console.log(JSON.stringify(trainingEvaluationList.value))
        //默认打开第一个标签
        activeNames.value = ["0"]
        //如果有则打开弹窗
        formDrawerRef_trainingEvaluation.value.open();
      } else {
        toastWarn("暂未评分");
      }
    })
    .catch((err) => {
      console.log("获取培训评分失败:", err);
    });
};

// 查询培训人改变事件
const searchPersonChange = () => {
  console.log("searchPersonChange===>", JSON.stringify(searchForm.userIds));
};
</script>